<template>
<div class="message-content message-box-shadow" v-show="at">
      <el-scrollbar style="height: 100%;"> 
        <div class="message-content message-content__inner" >
      <div class="interaction-item" 
      v-for="item in atMessageList" 
      :key="item.mentionId" 
      @mouseenter="delIndex=item.mentionId" 
      @mouseleave="delIndex=-1"
      @click="$router.push(`/videoDetail/${item.refVideoId}`)">
        <div class="interaction-item__left single">
          <el-avatar :size="46" :src="item.senderAvatar"></el-avatar>
        </div>
        <div class="interaction-item__right">
          <div class="interaction-item__content">
            <div class="interaction-item__title">
              <span class="interaction-item__uname">{{ item.senderNickname }}</span>
              <span class="interaction-item__action">在评论中@了我</span>
             </div>
             <div class="message-text-nodes interaction-item__msg bili-ellipsis">
               {{ item.content }} 
             </div>
             <div class="interaction-item__metadata">
              <div class="interaction-item__time">{{ item.publishTime }}</div>
              <div class="interaction-item__btn reply" @click.stop="toggleReplyPanel(item.mentionId)">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M1.3333333333333333 7C1.3333333333333333 4.05448 3.7211466666666664 1.6666666666666665 6.666666666666666 1.6666666666666665L9.333333333333332 1.6666666666666665C12.278833333333333 1.6666666666666665 14.666666666666666 4.05448 14.666666666666666 7C14.666666666666666 9.843699999999998 12.440933333333334 12.167499999999999 9.636533333333333 12.324333333333332C8.998166666666666 13.1427 7.948533333333334 14.1686 6.474246666666667 14.570333333333332C6.1891333333333325 14.648 5.92802 14.526299999999999 5.782006666666666 14.338366666666666C5.6404266666666665 14.156166666666666 5.59028 13.894933333333334 5.695926666666666 13.651666666666666C5.9177133333333325 13.141033333333333 5.963839999999999 12.672799999999999 5.933633333333333 12.281633333333334C3.3350933333333335 11.9255 1.3333333333333333 9.696666666666665 1.3333333333333333 7zM6.666666666666666 2.6666666666666665C4.273433333333333 2.6666666666666665 2.333333333333333 4.606766666666666 2.333333333333333 7C2.333333333333333 9.306033333333332 4.134893333333333 11.191666666666666 6.407 11.3257C6.633393333333332 11.339066666666668 6.822433333333334 11.5031 6.867533333333332 11.725366666666666C6.9593 12.177299999999999 6.987066666666667 12.741999999999999 6.825866666666666 13.367066666666666C7.792633333333333 12.938366666666667 8.513233333333332 12.171699999999998 8.978566666666666 11.537333333333333C9.071733333333333 11.410333333333334 9.219333333333333 11.334666666666665 9.376833333333334 11.333133333333333C11.749966666666666 11.309833333333332 13.666666666666666 9.378699999999998 13.666666666666666 7C13.666666666666666 4.606766666666666 11.726566666666665 2.6666666666666665 9.333333333333332 2.6666666666666665L6.666666666666666 2.6666666666666665z" fill="currentColor"></path></svg> 
                <span>回复</span>
              </div>
              <div class="interaction-item__btn invisible delete" @click.stop="open(item.mentionId)" v-show="delIndex===item.mentionId">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M5 3.25C5 2.3295266666666663 5.746193333333332 1.5833333333333333 6.666666666666666 1.5833333333333333L9.333333333333332 1.5833333333333333C10.253799999999998 1.5833333333333333 11 2.3295266666666663 11 3.25L11 3.833333333333333C11 4.109473333333333 10.776133333333334 4.333333333333333 10.5 4.333333333333333C10.223866666666666 4.333333333333333 10 4.109473333333333 10 3.833333333333333L10 3.25C10 2.8818133333333336 9.701533333333334 2.583333333333333 9.333333333333332 2.583333333333333L6.666666666666666 2.583333333333333C6.298473333333334 2.583333333333333 6 2.8818133333333336 6 3.25L6 3.833333333333333C6 4.109473333333333 5.77614 4.333333333333333 5.5 4.333333333333333C5.22386 4.333333333333333 5 4.109473333333333 5 3.833333333333333L5 3.25z" fill="currentColor"></path><path d="M1.3333333333333333 4.166666666666666C1.3333333333333333 3.8905266666666667 1.5571933333333332 3.6666666666666665 1.8333333333333333 3.6666666666666665L14.166666666666666 3.6666666666666665C14.4428 3.6666666666666665 14.666666666666666 3.8905266666666667 14.666666666666666 4.166666666666666C14.666666666666666 4.442806666666666 14.4428 4.666666666666666 14.166666666666666 4.666666666666666L1.8333333333333333 4.666666666666666C1.5571933333333332 4.666666666666666 1.3333333333333333 4.442806666666666 1.3333333333333333 4.166666666666666z" fill="currentColor"></path><path d="M3.1666666666666665 5.75C3.4428066666666663 5.75 3.6666666666666665 5.973859999999999 3.6666666666666665 6.25L3.6666666666666665 11.603066666666665C3.6666666666666665 12.442166666666667 4.28456 13.130766666666666 5.094706666666666 13.1985C5.950586666666666 13.270033333333332 6.993366666666667 13.333333333333332 8 13.333333333333332C9.006633333333333 13.333333333333332 10.049399999999999 13.270033333333332 10.905299999999999 13.1985C11.715433333333332 13.130766666666666 12.333333333333332 12.442166666666667 12.333333333333332 11.603066666666665L12.333333333333332 6.25C12.333333333333332 5.973859999999999 12.557199999999998 5.75 12.833333333333332 5.75C13.109466666666666 5.75 13.333333333333332 5.973859999999999 13.333333333333332 6.25L13.333333333333332 11.603066666666665C13.333333333333332 12.9358 12.342766666666666 14.081833333333332 10.9886 14.195C10.1174 14.267833333333332 9.044566666666666 14.333333333333332 8 14.333333333333332C6.955433333333333 14.333333333333332 5.882626666666667 14.267833333333332 5.011406666666666 14.195C3.6572266666666664 14.081833333333332 2.6666666666666665 12.9358 2.6666666666666665 11.603066666666665L2.6666666666666665 6.25C2.6666666666666665 5.973859999999999 2.8905266666666667 5.75 3.1666666666666665 5.75z" fill="currentColor"></path><path d="M6.333333333333333 7C6.60948 7 6.833333333333333 7.223866666666667 6.833333333333333 7.5L6.833333333333333 9.833333333333332C6.833333333333333 10.109466666666666 6.60948 10.333333333333332 6.333333333333333 10.333333333333332C6.057193333333332 10.333333333333332 5.833333333333333 10.109466666666666 5.833333333333333 9.833333333333332L5.833333333333333 7.5C5.833333333333333 7.223866666666667 6.057193333333332 7 6.333333333333333 7z" fill="currentColor"></path><path d="M9.666666666666666 7C9.942799999999998 7 10.166666666666666 7.223866666666667 10.166666666666666 7.5L10.166666666666666 9.833333333333332C10.166666666666666 10.109466666666666 9.942799999999998 10.333333333333332 9.666666666666666 10.333333333333332C9.390533333333334 10.333333333333332 9.166666666666666 10.109466666666666 9.166666666666666 9.833333333333332L9.166666666666666 7.5C9.166666666666666 7.223866666666667 9.390533333333334 7 9.666666666666666 7z" fill="currentColor"></path></svg> 
                <span>删除该通知</span>
              </div>
             </div>
             <div class="interaction-item__cover">
              <div class="bili-ellipsis">{{ item.content }}</div>
            </div>
          </div>
          <div class="interaction-item__panel"  v-show="index===item.mentionId">
            <div class="message-reply-box">
              <div class="message-reply-box__left">
                    <el-avatar :size="46" :src="userInfo.avatar"></el-avatar>
              </div>
              <div class="message-reply-box__center"  @click.stop="stopBubbleUp">
                <textarea placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。" class="message-reply-box__input" v-model="replyContent" maxlength="500"></textarea>
              </div>
              <div class="message-reply-box__right" >
                <button class="message-reply-box__pub" @click.stop="replyAtMeFuc(item)">发表评论</button>
              </div>

            </div>
          </div>
          </div>
      </div>
      </div>
      </el-scrollbar>
</div>


<div class="message-box-shadow message-content__inner" v-show="!at">
  <div class="at-layout">
    <div class="at-emtpy">
      <div class="message-empty">
        <img src="/notdata.png" alt="loading">
      </div>
    </div>
  </div>
</div>

</template>
<script setup>
import { ElAvatar } from 'element-plus';
import { ElMessage,ElMessageBox } from 'element-plus';
import { getAtMe,deleteAtMe,replyAtMe} from '@/api/@me';
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/useUserStore';
import { storeToRefs } from 'pinia';
//是否有@消息
const at = ref(true);
//用户信息
const userStore=useUserStore()
const { userInfo } = storeToRefs(userStore);
//@消息列表
const atMessageList=ref([]);
//点击恢复的索引号
const index = ref("");
//显示删除按钮的索引号
const delIndex = ref("");
//回复内容
const replyContent = ref("");
//点击文本框阻止事件冒泡

const stopBubbleUp = function() {
  console.log('阻止冒泡')
  
}


//定位当前点击条目索引
function toggleReplyPanel(id){
 if (index.value === id) {
       index.value = "";
     } else {
       index.value = id;
     }
}
//获取通知消息
async function getAtmeData(){
  try {
    console.log(userInfo.value.userId)
    let userId=userInfo.value.userId;
    if(userId===null){
      at.value=false
      ElMessage("请登录后再试！");
      return 
    }
    const data = await getAtMe(userId);
    atMessageList.value=data;
    if(atMessageList.value===null||atMessageList.value.length===0){
        at.value=false;
    }else{
        at.value=true;
        atMessageList.value=data;
    }
  } catch (error) {
    console.log(error);
    ElMessage.error("获取数据失败，请刷新后重试");
  }
}
//删除@我的消息
async function deleteMyAtMe(id){
  try{
    await deleteAtMe(id);
    //刷新通知消息列表
    getAtmeData()
  }catch(error){

  }
}

//删除评论弹窗
const  open =(id) => {
  ElMessageBox.confirm(
    '删除该条通知后将无法恢复，是否继续？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }
  )
    .then(() => {
    deleteMyAtMe(id)
    ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
//回复@我的消息
async function replyAtMeFuc(item){
  if(item===null) return;
  const data={
    videoId:item.refVideoId,
    publisherId:userInfo.value.userId,
    accepterId:item.senderId,
    parentCommentId:item.refCommentId,
    content:replyContent.value
  }
  try{
    await replyAtMe(data)
    ElMessage.success("评论成功！")
    replyContent.value=""
    index.value=""
  }catch{
    console.log('error')
  }
}
onMounted(()=>{
  getAtmeData();
})
</script>
<style scoped>
.message-content {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    max-height: 83vh;
    padding: 3px 0 10px 10px;
}
.message-box-shadow {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
}
.interaction-item {
    position: relative;
    cursor: pointer;
    display: flex;
    gap:7px;
}
.interaction-item__left {
    padding-left: 16px;
    padding-top: 24px;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    position: relative;
}
.interaction-item__right {
    width: calc(100% - 76px);
    box-sizing: border-box;
    padding: 24px 16px 24px 0;
    border-bottom: 1px solid #e3e5e7;
    
}
.interaction-item__content {
    box-sizing: border-box;
    position: relative;
    padding-right: 76px;
}
.interaction-item__title {
    display: flex;
    font-size: 14px;
    line-height: 15px;
}
.interaction-item__uname {
    font-weight: 700;
    text-decoration: none;
    color: #18191c;
}
.interaction-item__action {
    margin-left: 8px;
    color: #61666d;
}
.interaction-item__msg {
    margin-top: 10px;
    font-size: 14px;
    line-height: 18px;
    color: #18191c;
}

.bili-ellipsis {
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.message-text-nodes a {
    text-decoration: none;
    color: #00aeec;
    cursor: pointer;
    font-size: 14px;
}
.interaction-item__metadata{
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #9499a0;
}
.interaction-item__time {
    margin-right: 15px;
}
.reply {
    height: 100%;
}
.interaction-item__btn {
    cursor: pointer;
    margin-right: 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.interaction-item__btn:hover{
  color: #00aeec;
}
 .interaction-item__cover {
    position: absolute;
    right: 0;
    top: -7px;
    width: 60px;
    height: 60px;
    font-family: Microsoft YaHei;
}
.interaction-item__cover div {
    width: 100%;
    height: 100%;
    color: #9499a0;
    font-size: 14px;
    line-height: 15px;
}
.bili-ellipsis {
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.interaction-item__panel {
    margin-top: 20px;
    margin-left: -76px;
    width: calc(100% + 76px);
}
.message-reply-box {
    display: flex;
    height: 65px;
}
.message-reply-box__left {
    margin-left: 10px;
    padding-left: 16px;
    padding-right: 10px;
    flex-shrink: 0;
}
.message-reply-box__input:focus {
    border-color: #00aeec;
    background-color: #fff;
}
.message-reply-box__input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    resize: none;
    outline: none;
    border: 1px solid #e3e5e7;
    background-color: #f1f2f3;
    overflow: auto;
    border-radius: 4px;
    color: #61666d;
    padding: 5px 10px;
    font-size: 12px;
}
.message-reply-box__center {
    flex: 1;
    overflow: hidden;
}
.message-reply-box__right {
    margin-left: 10px;
}
.message-reply-box__pub {
    width: 70px;
    height: 100%;
    flex-shrink: 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00aeec;
    cursor: pointer;
    color: #fff;
    outline: none;
    border: none;
}
@media screen and (min-width: 1920px ) and (min-height: 1080px){
  .message-content{
  height: 86vh;
}
}
.message-content__inner {
    width: 100%;
}
.message-box-shadow {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
}
.at, .at-layout{
    height: 100%;
}
.message-empty {
    width: 100%;
    height: 256px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.message-empty img {
    height: 100%;
}
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
</style>